<template>
  <div>
    <div>
      <div v-for="(item, index) of orderGoodsList" :key="index" class="flex goods-box">
        <div class="flex flex-between" @click="changeCheck(item)">
          <van-checkbox :value="item.show" :checked-color="getAppInfo.style.color2"></van-checkbox>
        </div>
        <div class="flex mar-l-10">
          <div>
            <img class="width-84 height-84" :src="item.goodsImageUrl" alt="">
          </div>
          <div class="flex-col goods-info-box mar-l-10">
            <div>
              <span class="font-13 font-color-3">{{item.goodsTitle}}</span>
            </div>
            <div>
              <span class="font-13" style="color:#343434">￥{{item.goodsPayAmount}}</span>
              <span class="font-13 mar-l-10" style="color:#343434">共{{item.goodsNum}}件</span>
            </div>
          </div>
        </div>
      </div>
      <div v-if="!orderGoodsList.length" class="flex flex-center font-color-9 mar-t-20">
        暂无可售后的商品
      </div>
    </div>

    <div class="flex btn-box flex-between">
      <div class="font-16 font-color-6 mar-l-10" @click="changeAllGoods">
        <van-checkbox :value="allGoodsChecked" :checked-color="getAppInfo.style.color2">全选</van-checkbox>
      </div>
      <div class="sure-btn flex flex-center" @click="sureEvent" :class="selectedOrderGoodsList.checkedNum ? 'active-sure-btn': 'dis-sure-btn'">
        确定({{selectedOrderGoodsList.checkedNum}})
      </div>
    </div>
  </div>
</template>

<script>
export default {
  onLoad(params) {
    if ('orderGoodsList' in params) {
      // console.log(JSON.parse(params['orderGoodsList']))
      this.orderGoodsList = JSON.parse(params['orderGoodsList'])
      this.orderId = params.orderId
      // 过滤已全部售后的商品
      this.orderGoodsList = this.orderGoodsList.filter(item => { return (item.afterSaleGoodsNum < item.goodsNum) && item.afterSaleStatus !== 0 })
    }
  },
  data() {
    return {
      getAppInfo: {
        style: {}
      },
      orderGoodsList: [], // 退货商品列表
      allGoodsChecked: false // 是否全选
    }
  },
  computed: {
    // 选中商品信息
    selectedOrderGoodsList() {
      let tempArr = []
      tempArr = this.orderGoodsList.filter(item => item.show)
      return {
        checkedNum: tempArr.length,
        list: tempArr,
        orderId: ''
      }
    }
  },
  mounted() {
    this.init()
    this.getAppInfo = this.$pt.getStorageSync('appInfo')
  },
  methods: {
    init() {
      this.allGoodsChecked = false
      this.orderGoodsList.forEach(item => {
        this.$set(item, 'show', false)
      })
    },
    changeCheck(item) {
      item.show = !item.show
      let tempArr = []
      tempArr = this.orderGoodsList.filter(item => item.show)
      this.allGoodsChecked = tempArr.length === this.orderGoodsList.length
    },
    changeAllGoods() {
      this.allGoodsChecked = !this.allGoodsChecked
      this.orderGoodsList.forEach(item => {
        this.$set(item, 'show', this.allGoodsChecked)
      })
    },
    sureEvent() {
      if (!this.selectedOrderGoodsList.checkedNum) return
      let arr = []
      this.selectedOrderGoodsList.list.forEach(item => {
        arr.push(item.orderGoodsId)
      })
      let orderGoodsIdStr = arr.join(',')
      this.$pt.navigateTo({url: `/pages/personal/order/refund-view/main?orderGoodsId=${orderGoodsIdStr}&sku=${JSON.stringify(this.selectedOrderGoodsList.list)}&orderId=${this.orderId}&storeGoods=1&orderStatusType=${this.orderStatusType}`})
    }
  }
}
</script>

<style lang="less" scoped>
  .goods-box {
    background: #fff;
    padding-left: 10px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    .goods-info-box {
      justify-content: space-around;
    }
  }
  .btn-box {
    background: #fff;
    height: 53.5px;
    line-height: 53.5px;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    .sure-btn {
      color: #343434;
      font-size: 16px;
      background: #FFE200;
      width: 144.5px;
    }
    .active-sure-btn {
      background: #FFE200;
    }
    .dis-sure-btn {
      background: #ddd;
    }
  }
</style>